﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>潜在客户报表</title>
    <!-- freemaker：引入模板文件，使用相对路径 来引用 ; .. 上一级目录views -->
    <#include "../common/link.ftl">
    <script>
        $(function () {
            // 使用日期插件
            $('.input-daterange').datepicker({
                language: "zh-CN",
                autoclose: true,
                todayHighlight: true,
                clearBtn: true
            });

            $(".btn-chart").click(function () {
                // 加载之前，清空模态框的数据(里面的缓存)
                $("#myModal").removeData('bs.modal');
                // 告诉模态框，图形报表 URL是哪个，加载内容并且放到模态框（bootstrap的模态框 属性中有个 remote可以指定）
                var url = $(this).data("url");
                $("#myModal").modal({
                    // 需要加上高级查询的条件
                    // 如果提供的是 URL，将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容（只加载一次）并插入 .modal-content 内。
                    // 把表单的所有参数带过去 $('#searchForm').serialize();
                    remote :url + "?" + $('#searchForm').serialize() /* 只能加载一次，相当于有缓存。所以切换图的时候，会有问题。*/
            });

                $("#myModal").modal('show');
            });
        });
    </script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <!-- 页面的头部内容回显 -->
    <#include "../common/navbar.ftl">
    <!--菜单回显-->
    <#assign currentMenu="customerReport"/>
    <#include "../common/menu.ftl">
    <div class="content-wrapper">
        <section class="content-header">
            <h1>潜在客户报表</h1>
        </section>
        <section class="content">
            <div class="box">
                <!--高级查询--->
                <div style="margin: 10px;">
                    <form class="form-inline" id="searchForm" action="/customerReport/list.do" method="post">
                        <input type="hidden" name="currentPage" id="currentPage" value="1">
                        <div class="form-group">
                            <label for="keyword">关键字:</label>
                            <input type="text" class="form-control" id="keyword" name="keyword" value="${qo.keyword!}"
                                   placeholder="请输入姓名/电话">
                        </div>
                        <div class="form-group">
                            <label>时间段查询:</label>
                            <div class="input-daterange input-group" id="datepicker">
                                <input type="text" class="input-sm form-control" name="beginDate"
                                       value="${(qo.beginDate?string('yyyy-MM-dd'))!}"/>
                                <span class="input-group-addon">to</span>
                                <input type="text" class="input-sm form-control" name="endDate"
                                       value="${(qo.endDate?string('yyyy-MM-dd'))!}"/><#-- value 这里的时间要转为字符串才能显示-->
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="status">分组类型:</label>
                            <select class="form-control" id="groupType" name="groupType">
                                <option value="e.name">员工</option>
                                <option value="DATE_FORMAT(c.input_time, '%Y')">
                                    年
                                </option>
                                <option value="DATE_FORMAT(c.input_time, '%Y-%m')">
                                    月
                                </option>
                                <option value="DATE_FORMAT(c.input_time, '%Y-%m-%d')">
                                    日
                                </option>
                            </select>
                            <script>
                                $("#groupType").val("${qo.groupType!}")
                                /* 加上 ""，转为字符串才能设置进去*/
                            </script>
                        </div>
                        <button id="btn_query" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span>
                            查询
                        </button>
                        <button type="button" class="btn btn-info btn-chart" data-url="/customerReport/listByBar2.do">
                        <#-- /customerReport 前面的斜杠不能少，否则会出现404错误。前端的路径会变成 http://localhost/customerReport/customerReport/listByBar2.do 重复了，因为它不是从上下文路径开始，是用相对路径（/customerReport/list 的上一级目录开始找）去找了-->
                            <span class="glyphicon glyphicon-stats"></span> 柱状图
                        </button>
                        <button type="button" class="btn btn-warning btn-chart"
                                data-url="/customerReport/listByPie.do">
                            <span class="glyphicon glyphicon-dashboard"></span> 饼状图
                        </button>
                    </form>
                </div>
                    <div class="box-body table-responsive no-padding ">
                        <table class="table table-hover table-striped">
                            <tr>
                                <th>分组类型</th>
                                <th>潜在客户新增数</th>
                            </tr>
                            <#list result.list as map>
                            <tr>
                                <!-- freemarker 如果取值时是空值 会报错 -->
                                <td>${map.groupType!}</td>
                                <td>${map.number!}</td>
                            </tr>
                            </#list>
                        </table>
                          <#include "../common/page.ftl">
                    </div>
                </div>
        </section>
    </div>
    <#include "../common/footer.ftl">
</div>
<#-- 模态框-->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

</body>

</html>
